<template>
  <div class="admin-feedback-component">
    <el-card shadow="hover" class="feedback-card">
      <h2>用户意见反馈管理</h2>

      <!-- 表格 -->
      <el-table :data="feedbacks" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column prop="contact" label="联系方式" width="200"></el-table-column>
        <el-table-column prop="content" label="反馈内容"></el-table-column>
        <el-table-column prop="created_at" label="提交时间" width="180"></el-table-column>
        <el-table-column prop="status" label="状态" width="100"></el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button type="danger" size="small" @click="deleteFeedback(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 批量删除按钮 -->
      <div style="margin-top: 20px;">
        <el-button type="danger" @click="batchDeleteFeedback">批量删除</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'AdminFeedback',
  data() {
    return {
      feedbacks: [],   // 表格数据
      selectedRows: [] // 多选行
    };
  },
  mounted() {
    this.fetchFeedbacks();
  },
  methods: {
    fetchFeedbacks() {
      this.$axios.get('/api/admin/feedbacks')
          .then(response => {
            console.log('原始数据:', response.data);

            if (Array.isArray(response.data)) {
              this.feedbacks = response.data;
            } else if (response.data && Array.isArray(response.data.feedbacks)) {
              this.feedbacks = response.data.feedbacks;
            } else {
              this.$message.warning('后端返回的数据格式异常');
              this.feedbacks = [];
            }
          })
          .catch(error => {
            console.error('请求失败:', error);
            this.$message.error('获取反馈失败');
          });
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection;
    },
    deleteFeedback(id) {
      this.$axios.delete(`/api/admin/feedback/${id}`)
          .then(() => {
            this.$message.success('删除成功');
            this.fetchFeedbacks(); // 刷新表格
          })
          .catch(error => {
            console.error('删除失败:', error);
            this.$message.error('删除失败，请重试');
          });
    },
    batchDeleteFeedback() {
      if (!this.selectedRows.length) {
        this.$message.warning('请先选择要删除的反馈');
        return;
      }

      const ids = this.selectedRows.map(row => row.id);
      this.$axios.post('/api/admin/feedback/batch-delete', { ids })
          .then(() => {
            this.$message.success('批量删除成功');
            this.fetchFeedbacks();
          })
          .catch(error => {
            console.error('批量删除失败:', error);
            this.$message.error('批量删除失败');
          });
    }
  }
};
</script>

<style scoped>
.admin-feedback-component {
  max-width: 1000px;
  margin: 40px auto;
  padding: 20px;
}

.feedback-card {
  border-radius: 10px;
  padding: 30px;
  background-color: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
</style>